// ================================================================================================
// 	File Name: gallery.scss
// 	Description: Page content different types of gallery page layouts SCSS.
// 	----------------------------------------------------------------------------------------------
// 	Item Name: Chameleon Admin - Modern Bootstrap 4 WebApp & Dashboard HTML Template + UI Kit
// 	Version: 1.0
// 	Author: ThemeSelection
// 	Author URL: https://themeforest.net/user/themeselect
// ================================================================================================

.gallery-thumbnail{
	max-width: 100%;
	height: auto;
}

.grid-sizer, .grid-item {
  width: 20%;
}

.grid-item{
    figure,
    > div{
        margin: 0;
        margin: 0.4rem;
    }
}

/*  masonry grid media queries */
@media screen and (max-width: 2200px) {
  .grid-sizer, .grid-item {
    width: 20%;
  }
}

@media screen and (max-width: 1800px) {
  .grid-sizer, .grid-item {
    width: 30%;
  }
}

@media screen and (max-width: 1600px) {
  .grid-sizer, .grid-item {
    width: 33.33%;
  }
}

@media screen and (max-width: 1224px) {
  .grid-sizer, .grid-item {
    width: 33.33%;
  }
}

@media screen and (max-width: 980px) {
  .grid-sizer, .grid-item {
    width: 50%;
  }
}

@media screen and (max-width: 720px) {
  .grid-sizer, .grid-item {
    width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .grid-sizer, .grid-item {
    width: 100%;
  }
}

@media screen and (max-width: 50em) {
	.content {
		padding: 0 10px;
	}
	.grid {
		figure {
			display: inline-block;
			float: none;
			margin: 10px auto;
			width: 100%;
		}
	}
}
